<template>
  <el-dialog
    class="rechargeDialog"
    v-model="visible"
    :title="dialogDatas.title"
    @closed="onReset"
    destroy-on-close
  >
    <el-form :model="dialogDatas" ref="formRef" class="px10">
      <el-form-item label="设备ID" prop="dialogDatas.datas.mealName">

        <el-input v-model="dialogDatas.row.deviceId" clearable disabled="true"/>
      </el-form-item>
      <el-form-item label="健康顾问手机号" prop="dialogDatas.datas.rechargePoints">
        <el-input v-model="mobileNumber" placeholder="请输入手机号" class="input-with-select">
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
        <!-- <el-input v-model="mobileNumber" clearable />
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template> -->
      </el-form-item>
      <el-form-item label="该设备登录密码为" prop="dialogDatas.datas.amount">
        <el-input v-model="amount" />
      </el-form-item>
    </el-form>

    <span class="dialog-footer flex justify-center mb4 mt4">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { viewPasswordRequest } from '@/api/checkPointEquipment';
import { Search } from '@element-plus/icons-vue';
const visible = ref(false);
const formRef = ref<FormInstance>();
let dialogDatas = ref({});
// const form = ref({
//   // mealName: '',
//   // points: '',
//   // remark: ''
// });

import type { UploadFile } from 'element-plus';

const dialogImageUrl = ref('');
let amount = ref('');
const dialogVisible = ref(false);
let disabled = ref(false);
let mobileNumber = ref('');
const handleSearch = () => {
  getViewPasswordData();
};
const getViewPasswordData = async () => {
  const data: any = await viewPasswordRequest({
    deviceId: dialogDatas.value.row.deviceId,//设备id
    phone: mobileNumber.value
  });
  amount.value = data.data;
};

const init = (data: any) => {
  visible.value = true;
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));
};
const onReset = () => {
  amount.value=''
  mobileNumber.value=''
  if (!formRef.value) return;
  formRef.value.resetFields();
};

defineExpose({ init });
</script>

<style lang="scss">
.rechargeDialog {
  .el-form-item {
    display: contents;
  }
  .el-form-item__content {
    width: auto;
  }
}
</style>
